<template>
  <div class="menu">
    <div class="menu_search">
      <van-search placeholder="请输入商品名称" @focus="searchFocus" />
    </div>
    <!-- 分类列表导航 -->
    <div class="menu_content">
      <!-- 菜单分类列表 -->
      <div class="menu_list">
        <div class="menu_list_item" v-for="(item,i) in titleData" :key="i" :class="{active:i==isShow}" @click="getTypeData(item.key, item.value),recordIndex(i),changeColor(i)">

          <p>{{item.title}}</p>
        </div>
      </div>
      <!-- 对应的商品 -->
      <div class="menu_goods  clearfix fr">
        <div class="good clearfix" v-for="(good) in productData " :key="good.id" @click="jumpGoodPage(good.pid,good)">
          <ProItem :item="good"></ProItem>
        </div>
      </div>

    </div>
  </div>

</template>

<script>
import '@/assets/less/menu.less'
import request from '@/utils/reques'
import ProItem from '@/components/pro-item.vue'
export default {
  components: {
    ProItem
  },
  data() {
    return {
      titleData: [
        {
          title: '热卖推荐',
          key: 'isHot',
          value: 1
        },
        {
          title: '拿铁',
          key: 'type',
          value: 'latte'
        },
        {
          title: '咖啡',
          key: 'type',
          value: 'coffee'
        },
        {
          title: '水果茶',
          key: 'type',
          value: 'fruit_tea'
        },
        { title: '瑞纳冰', key: 'typeDesc', value: '瑞纳冰' }
      ],
      // 点击菜单列表的样式变化
      isShow: 0,
      // 菜单商品数据
      productData: {},
      // 记录当前的选中的分类的下标
      current: 0
    }
  },
  created() {
    this.getTypeData('isHot', 1)
  },
  methods: {
    changeColor(index) {
      this.isShow = index
    },
    async getTypeData(key, value) {
      const { data: res } = await request.get('/typeProducts', { params: { appkey: this.appkey, key: key, value: value } })

      this.productData = res.result
      // console.log(this.productData)
      // 获取的是热卖的数据就给hot 添加类名
    },
    jumpGoodPage(pid, item) {
      this.$router.push({ name: 'Good', params: { pid } })
      item.time = new Date().toLocaleDateString() + ' ' + new Date().toLocaleTimeString()
      this.$store.commit('addTrackCount', item)
    },
    recordIndex(index) {
      this.current = index
    },
    // 跳转到搜索页面
    searchFocus() {
      this.$router.push({ path: '/search', name: 'Search' })
    }
  }
}
</script>

<style lang="less" scoped>
</style>